<script setup lang="ts">
import { LoginPinia } from "@/store/modules/Login";

// 历史搜索数据
let historySearch = ref(JSON.parse(localStorage.getItem("historySearch") as string) || []);
const loginValue = LoginPinia();
const input = ref("");
const sure = (item: string) => {
  input.value = item;
  search();
};
//控制历史记录删除图片显示隐藏的数据
const hiddenIcon = ref(false);
const search = () => {
  // 输入的值不为空执行
  if (!input.value) return;
  handleHistory();
  uni.navigateTo({ url: `/pages/search/index?input=${input.value}` });
  input.value = "";
};

// 搜索时操作历史记录事件
const handleHistory = () => {
  // 向搜索记录添加一条数据 判断是否存在
  let index = historySearch.value.findIndex((item: any) => item === input.value);
  // 如果存在删除对应
  if (index > -1) {
    historySearch.value.splice(index, 1);
  }
  // 头部添加
  historySearch.value.unshift(input.value);
  // 向本地存储添加
  localStorage.setItem("historySearch", JSON.stringify(historySearch.value));
};

// 点击取消事件
const cancel = () => {
  input.value = "";
  uni.switchTab({ url: "/" });
};

// 删除图标点击事件
const changeHidden = () => {
  hiddenIcon.value = !hiddenIcon.value;
};

// 删除数据
const delTitle = (delValue: string) => {
  let index = historySearch.value.findIndex((item: any) => item === delValue);
  historySearch.value.splice(index, 1);
  // 重新设置本地
  localStorage.setItem("historySearch", JSON.stringify(historySearch.value));
};
</script>

<template>
  <wd-search
    v-model="input"
    placeholder-left
    placeholder="搜一搜：疾病/症状/医生"
    @cancel="cancel"
    @search="search"
  />
  <view class="w-9/10 ml-0.05/1" mt mb>
    <view v-if="historySearch.length > 0" class="w-full h-60rpx flex-between">
      <b class="font-size-34">历史记录</b>
      <wd-icon v-if="!hiddenIcon" name="delete" size="36rpx" color="gray" @click="changeHidden" />
      <text
        v-else
        class="tracking-0rpx text-center leading-20rpx text-26rpx font-regular"
        style=""
        @click="changeHidden"
      >
        完成
      </text>
    </view>
    <!-- 历史搜索 -->
    <view class="w-full mt-20rpx mb-20rpx flex flex-wrap">
      <text
        v-for="item in historySearch"
        class="text-[#3c3e42] bg-[#f2f2f2] rounded-40rpx h-40rpx p-20rpx text-align-center mb-10rpx mx-10rpx"
        style="font-size: 26rpx"
        @click="!hiddenIcon ? sure(item) : delTitle(item)"
      >
        {{ item }}
        <wd-icon v-if="hiddenIcon" name="close" size="20rpx" color="#3c3e42"></wd-icon>
      </text>
    </view>
    <!-- 热门搜索 -->
    <view class="w-full h-60rpx">
      <b class="font-size-34">热门搜索</b>
    </view>
    <view class="w-full mt-20rpx mb-20rpx flex flex-wrap">
      <text
        v-for="item in loginValue.hotList"
        class="text-[#3c3e42] bg-[#f2f2f2] rounded-40rpx h-40rpx p-20rpx text-align-center mb-10rpx mx-10rpx"
        style="font-size: 26rpx"
        @click="sure(item)"
      >
        {{ item }}
      </text>
    </view>
  </view>
</template>

<style lang="scss" scoped></style>
